function $(se) {
    return document.querySelector(se)
}
function $s(se) {
    return document.querySelectorAll(se)
}

// 粒子插件
window.onload = function() {
    //配置
    var config = {
        vx: 4,	//小球x轴速度,正为右，负为左
        vy: 4,	//小球y轴速度
        height: 2,	//小球高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 200,		//点个数
        color: "121, 162, 185", 	//点颜色
        stroke: "130,255,255", 		//线条颜色
        dist: 6000, 	//点吸附距离
        e_dist: 20000, 	//鼠标吸附加速距离
        max_conn: 10 	//点到点最大连接数
    }

    //调用
    CanvasParticle(config);
}


//身份证价格js交互
// 动态生成数据
let data = [
      {"times": 4000, "price": 1200, "unitPrice": "0.3000"},
      {"times": 8000, "price": 2000,"unitPrice": "0.2500" },
      {"times": 40000, "price": 8000, "unitPrice": "0.2000" }
     ]

//定义代码片段









// let times1=document.querySelectorAll(".time>.times1")//需要动态生成的三个4000次 8000次 40000次节点
// let price=document.querySelector(".money>span")//总价price价格
// let unitPrice=document.querySelector(".money>b")//单价unitPrice
// let time=document.querySelector(".time")//span父级元素
// //console.log(times,price,unitPrice,times1);
// //遍历对象数组
// data.forEach(function(v,i){
//     //创建节点span
//     let span=document.createElement("span")
//     //添加内容
//     span.textContent=v.times+"次"
//     //默认激活样式
//     if(i==0){
//         span.classList.add("active")
//     }
//     //添加自定义是属性 总价price和单价unitPrice 为后面点击事件做准备
//     span.setAttribute("price",v.price)
//     span.setAttribute("unitPrice",v.unitPrice)
//     //追加在页面
//     time.append(span)
// })

// //上面创建了span这里才能获取节点在上面获取是没有的
// let times=document.querySelectorAll(".time>span")//五个span节点//
// //console.log(times);
// //遍历span添加点击事件
// times.forEach(function(value,i){
//     //判断索引为0 第一个值不添加类名
//     if(i!=0){
//         //给span添加点击事件
//         value.addEventListener("click",function(){
//             //console.log(111);
//             //一刀切所有的点击激活样式
//             times.forEach(function(v){
//                 v.classList.remove("active")
//             })
//             //1.添加类名点击谁就激活样式
//             value.classList.add("active")
//             //2.添加类名点击谁就激活样式，后面的单价和总价属性也跟着变
//             //获取自定义属性
//             let price2=value.getAttribute("price")
//             let unitPric2=value.getAttribute("unitPrice")
//             //console.log(price2,unitPric2);
//             //放入到对页面对应的位置
//             //获取页面对应位置的节点
//             let b1=document.querySelector(".money>b")
//             let b2=document.querySelector(".money>span>b")
//             //console.log(a,b);
//             b1.textContent=price2
//             b2.textContent=unitPric2

//         })
            
//         // console.log(value.textContent);

//     }
// })





























//API选项卡菜单和主体交互
$s('.api-nav> ul li').forEach(function(dom,i){
    dom.addEventListener("click",function(){
        //删除类名
        $s('.api-nav> ul li').forEach(function(v,i){
            v.classList.remove('on')
            $s('.api-nav> ul li span')[i].classList.remove("active")
            $s('.api-tab-content>div .car')[i].classList.remove("block")
        })

        //添加类名
        this.classList.add("on")
        $s('.api-nav> ul li span')[i].classList.add("active")
        $s('.api-tab-content>div .car')[i].classList.add("block")
       
    })
})


